<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七年级古诗与生字词有奖抽背</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #ffe6f2;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }
        
        h1 {
            color: #ff66b3;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            text-align: center;
        }
        
        .class-selector {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 20px;
        }
        
        .class-btn {
            background-color: #ffb3e6;
            color: #cc0066;
            border: none;
            border-radius: 20px;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .class-btn.active {
            background-color: #ff66b3;
            color: white;
        }
        
        .mode-selector {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 20px;
        }
        
        .mode-btn {
            background-color: #ffccf2;
            color: #cc0066;
            border: none;
            border-radius: 20px;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .mode-btn.active {
            background-color: #ff66b3;
            color: white;
        }
        
        .container {
            display: flex;
            width: 90%;
            max-width: 1200px;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .panel {
            flex: 1;
            background-color: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(255, 102, 179, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .panel-title {
            color: #ff66b3;
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .display-area {
            width: 100%;
            height: 200px;
            border: 3px dashed #ffb3e6;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .name-display {
            font-size: 48px;
            font-weight: bold;
            color: #ff3399;
            text-align: center;
            position: relative;
        }
        
        .poem-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .poem-title {
            font-size: 36px;
            color: #cc0066;
            margin-bottom: 5px;
        }
        
        .poem-author {
            font-size: 24px;
            color: #ff66b3;
            font-style: italic;
        }
        
        .word-display {
            font-size: 36px;
            color: #cc0066;
            text-align: center;
        }
        
        .pinyin-display {
            font-size: 24px;
            color: #ff66b3;
            margin-top: 10px;
            text-align: center;
        }
        
        .show-answer-btn {
            background-color: #ffb3e6;
            color: #cc0066;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        .answer-display {
            font-size: 24px;
            color: #ff3399;
            margin-top: 10px;
            font-weight: bold;
            display: none;
        }
        
        .control-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
        }
        
        .control-btn {
            background-color: #ff66b3;
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 30px;
            font-size: 24px;
            cursor: pointer;
            margin: 10px 0;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(255, 102, 179, 0.3);
        }
        
        .control-btn:hover {
            background-color: #ff3399;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(255, 102, 179, 0.4);
        }
        
        .control-btn:active {
            transform: translateY(1px);
        }
        
        .speed-control {
            width: 100%;
            margin: 20px 0;
        }
        
        .speed-label {
            color: #ff66b3;
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .history {
            width: 90%;
            max-width: 1200px;
            background-color: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(255, 102, 179, 0.2);
        }
        
        .history-title {
            color: #ff66b3;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .history-list {
            max-height: 150px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #ffccf2;
            border-radius: 8px;
        }
        
        .history-item {
            padding: 8px 0;
            border-bottom: 1px dashed #ffccf2;
            display: flex;
            justify-content: space-between;
        }
        
        .score-panel {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }
        
        .score {
            font-size: 18px;
            color: #ff66b3;
        }
        
        .download-btn {
            background-color: #ffb3e6;
            color: #cc0066;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
        }
        
        @keyframes rollUp {
            0% { transform: translateY(100px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes rollDown {
            0% { transform: translateY(-100px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        .rolling-up {
            animation: rollUp 0.3s ease-out;
        }
        
        .rolling-down {
            animation: rollDown 0.3s ease-out;
        }
        
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-50px); }
        }
    </style>
</head>
<body>
    <h1>🐬 七年级古诗与生字词有奖抽背 🐬</h1>
    
    <div class="class-selector">
        <button id="class11Btn" class="class-btn">七(11)班</button>
        <button id="class12Btn" class="class-btn active">七(12)班</button>
    </div>
    
    <div class="mode-selector">
        <button id="poemModeBtn" class="mode-btn active">古诗抽背</button>
        <button id="wordModeBtn" class="mode-btn">生字词抽背</button>
    </div>
    
    <div class="container">
        <div class="panel">
            <div class="panel-title">学生抽答</div>
            <div class="display-area">
                <div id="nameDisplay" class="name-display">准备开始</div>
            </div>
            <div class="speed-control">
                <div class="speed-label">翻滚速度调节</div>
                <input type="range" id="speedControl" min="100" max="500" value="300" style="width:100%">
            </div>
        </div>
        
        <div class="control-panel">
            <button id="startBtn" class="control-btn">开始</button>
            <button id="stopBtn" class="control-btn" disabled>结束</button>
        </div>
        
        <div class="panel">
            <div class="panel-title" id="questionTitle">古诗抽背</div>
            <div class="display-area">
                <div id="poemContainer" class="poem-display" style="display: none;">
                    <div id="poemTitle" class="poem-title"></div>
                    <div id="poemAuthor" class="poem-author"></div>
                </div>
                <div id="wordContainer" class="word-display" style="display: none;">
                    <div id="pinyinDisplay" class="pinyin-display"></div>
                    <button id="showAnswerBtn" class="show-answer-btn">查看答案</button>
                    <div id="answerDisplay" class="answer-display"></div>
                </div>
                <div id="readyText">准备开始</div>
            </div>
            <div class="score-panel">
                <div class="score">得分: <span id="score">0</span></div>
                <button id="correctBtn" class="control-btn" style="padding: 5px 15px; font-size: 16px; background-color: #66cc99;">答对 +1</button>
                <button id="wrongBtn" class="control-btn" style="padding: 5px 15px; font-size: 16px; background-color: #ff6666;">答错 -1</button>
            </div>
        </div>
    </div>
    
    <div class="history">
        <div class="history-title">抽答记录</div>
        <div class="history-list" id="historyList"></div>
        <div style="text-align: right; margin-top: 10px;">
            <button id="downloadBtn" class="download-btn">下载记录和分数</button>
        </div>
    </div>
    
    <audio id="correctSound" src="https://www.soundjay.com/buttons/sounds/button-09.mp3" preload="auto"></audio>
    <audio id="wrongSound" src="https://www.soundjay.com/buttons/sounds/button-10.mp3" preload="auto"></audio>
    
    <script>
        // 学生名单
        const class11Students = [
            "罗梓瑜", "黄诗淇", "黎昱琳", "吴诗祺", "缪梦欣", "周锴晨", "刘景灏", "许子轩", 
            "林乐萍", "刘家豪", "邵昆", "王昱哲", "陈睿淇", "邓皓轩", "朱铭泽", "黄佳欢", 
            "朱聿铉", "骆雨荷", "张洛琳", "陈建铭", "谢文烨", "伏锦涵", "唐佳璐", "江芷然", 
            "温梓熙", "孙征昂", "万幸君", "杨煜航", "何易霖", "邓俊朗", "钟弢博", "钟采薇", 
            "陈诺", "黄子炫", "利智桓", "黎旭霖", "周烜裕", "黄炜柏", "谢东灿", "邝煜琪", "李俊烨"
        ];
        
        const class12Students = [
            "黄思妍", "石昊", "陈慧", "胡芷若", "许逸涛", "吴珍美", "杨嘉铭子", "吴梓轩", 
            "周天德", "袁玥", "钟宇星", "叶羽轩", "利立恩", "刘俊涛", "杨青静", "朱浩鑫", 
            "赖骏桀", "潘浩杰", "刘景润", "朱泓宇", "刘雨泽", "邱浩轩", "彭晓娟", "蓝嘉嘉", 
            "杨宇", "黄玮纯", "刘嘉豪", "钟晗煊", "蓝梓杰", "黄语扬", "叶俊熙", "李诗盈", 
            "周海烨", "陈雪慧", "辛洋", "赖子睿", "刘星语", "谢承熙", "林亿锐", "张运鸿", "张智麟"
        ];
        
        // 古诗列表
        const poems = [
            {title: "竹里馆", author: "王维"},
            {title: "春夜洛城闻笛", author: "李白"},
            {title: "逢入京使", author: "岑参"},
            {title: "晚春", author: "韩愈"},
            {title: "泊秦淮", author: "杜牧"},
            {title: "贾生", author: "李商隐"},
            {title: "过松源晨炊漆公店", author: "杨万里"},
            {title: "约客", author: "赵师秀"},
            {title: "登幽州台歌", author: "陈子昂"},
            {title: "望岳", author: "杜甫"},
            {title: "登飞来峰", author: "王安石"},
            {title: "游山西村", author: "陆游"},
            {title: "己亥杂诗", author: "龚自珍"},
            {title: "木兰诗", author: "北朝民歌"}
        ];
        
        // 生字词列表（拼音+汉字）
        const words = [
            {pinyin: "应hè", word: "应和"},
            {pinyin: "liáo亮", word: "嘹亮"},
            {pinyin: "lǎng润", word: "朗润"},
            {pinyin: "贮xù", word: "贮蓄"},
            {pinyin: "chéng清", word: "澄清"},
            {pinyin: "宽chang", word: "宽敞"},
            {pinyin: "地tǎn", word: "地毯"},
            {pinyin: "花bāo", word: "花苞"},
            {pinyin: "粗guǎng", word: "粗犷"},
            {pinyin: "静mì", word: "静谧"},
            {pinyin: "淅lì", word: "淅沥"},
            {pinyin: "lì临", word: "莅临"},
            {pinyin: "吝sè", word: "吝啬"},
            {pinyin: "duō duō逼人", word: "咄咄逼人"},
            {pinyin: "tān痪", word: "瘫痪"},
            {pinyin: "憔cuì", word: "憔悴"},
            {pinyin: "xù叨", word: "絮叨"},
            {pinyin: "jué别", word: "诀别"},
            {pinyin: "烂màn", word: "烂漫"},
            {pinyin: "一shà", word: "一霎"},
            {pinyin: "翻来fù去", word: "翻来覆去"},
            {pinyin: "波光lín lín", word: "波光粼粼"},
            {pinyin: "喜出wàng外", word: "喜出望外"},
            {pinyin: "分qí", word: "分歧"},
            {pinyin: "书shú", word: "书塾"},
            {pinyin: "各得qí所", word: "各得其所"},
            {pinyin: "遮bi", word: "遮蔽"},
            {pinyin: "人迹罕zhi", word: "人迹罕至"},
            {pinyin: "shēn士", word: "绅士"},
            {pinyin: "zhàn放", word: "绽放"},
            {pinyin: "huǐ恨", word: "悔恨"},
            {pinyin: "徜yáng", word: "徜徉"},
            {pinyin: "浩miǎo", word: "浩渺"},
            {pinyin: "雕lòu", word: "雕镂"},
            {pinyin: "chǎn释", word: "阐释"},
            {pinyin: "派qiǎn", word: "派遣"},
            {pinyin: "狭ài", word: "狭隘"},
            {pinyin: "mò不关心", word: "漠不关心"},
            {pinyin: "热chén", word: "热忱"},
            {pinyin: "麻木不rén", word: "麻木不仁"},
            {pinyin: "纯cuì", word: "纯粹"},
            {pinyin: "劳lù", word: "劳碌"},
            {pinyin: "周jì", word: "周济"},
            {pinyin: "niān轻怕重", word: "拈轻怕重"},
            {pinyin: "jié报", word: "捷报"},
            {pinyin: "安xiáng", word: "安详"},
            {pinyin: "quán伏", word: "蜷伏"},
            {pinyin: "惩jiè", word: "惩戒"},
            {pinyin: "tuì变", word: "蜕变"},
            {pinyin: "风zhú残年", word: "风烛残年"},
            {pinyin: "jiān灭", word: "歼灭"},
            {pinyin: "畏罪qián逃", word: "畏罪潜逃"},
            {pinyin: "迁xǐ", word: "迁徙"},
            {pinyin: "diāo零", word: "凋零"},
            {pinyin: "弥màn", word: "弥漫"},
            {pinyin: "滑jī", word: "滑稽"},
            {pinyin: "缥miǎo", word: "缥缈"},
            {pinyin: "不可救yào", word: "不可救药"},
            {pinyin: "hài人听闻", word: "骇人听闻"},
            {pinyin: "随声附hè", word: "随声附和"}
        ];
        
        // DOM元素
        const nameDisplay = document.getElementById('nameDisplay');
        const poemContainer = document.getElementById('poemContainer');
        const poemTitle = document.getElementById('poemTitle');
        const poemAuthor = document.getElementById('poemAuthor');
        const wordContainer = document.getElementById('wordContainer');
        const pinyinDisplay = document.getElementById('pinyinDisplay');
        const answerDisplay = document.getElementById('answerDisplay');
        const showAnswerBtn = document.getElementById('showAnswerBtn');
        const readyText = document.getElementById('readyText');
        const questionTitle = document.getElementById('questionTitle');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const speedControl = document.getElementById('speedControl');
        const historyList = document.getElementById('historyList');
        const scoreDisplay = document.getElementById('score');
        const correctBtn = document.getElementById('correctBtn');
        const wrongBtn = document.getElementById('wrongBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const correctSound = document.getElementById('correctSound');
        const wrongSound = document.getElementById('wrongSound');
        const class11Btn = document.getElementById('class11Btn');
        const class12Btn = document.getElementById('class12Btn');
        const poemModeBtn = document.getElementById('poemModeBtn');
        const wordModeBtn = document.getElementById('wordModeBtn');
        
        // 变量
        let nameInterval, questionInterval;
        let currentSpeed = 300;
        let score = 0;
        let history = [];
        let currentClass = 'class12';
        let currentMode = 'poem';
        let currentStudents = class12Students;
        let currentWordAnswer = '';
        
        // 初始化
        function init() {
            // 设置速度控制
            speedControl.addEventListener('input', function() {
                currentSpeed = 600 - this.value; // 反转值，使滑块右侧为快
            });
            
            // 班级选择
            class11Btn.addEventListener('click', function() {
                currentClass = 'class11';
                currentStudents = class11Students;
                class11Btn.classList.add('active');
                class12Btn.classList.remove('active');
            });
            
            class12Btn.addEventListener('click', function() {
                currentClass = 'class12';
                currentStudents = class12Students;
                class12Btn.classList.add('active');
                class11Btn.classList.remove('active');
            });
            
            // 模式选择
            poemModeBtn.addEventListener('click', function() {
                currentMode = 'poem';
                questionTitle.textContent = '古诗抽背';
                poemModeBtn.classList.add('active');
                wordModeBtn.classList.remove('active');
                poemContainer.style.display = 'flex';
                wordContainer.style.display = 'none';
                readyText.style.display = 'none';
                answerDisplay.style.display = 'none';
            });
            
            wordModeBtn.addEventListener('click', function() {
                currentMode = 'word';
                questionTitle.textContent = '生字词抽背';
                wordModeBtn.classList.add('active');
                poemModeBtn.classList.remove('active');
                poemContainer.style.display = 'none';
                wordContainer.style.display = 'flex';
                readyText.style.display = 'none';
                answerDisplay.style.display = 'none';
            });
            
            // 查看答案按钮
            showAnswerBtn.addEventListener('click', function() {
                answerDisplay.style.display = 'block';
                answerDisplay.textContent = currentWordAnswer;
            });
            
            // 开始按钮
            startBtn.addEventListener('click', function() {
                startBtn.disabled = true;
                stopBtn.disabled = false;
                answerDisplay.style.display = 'none';
                
                // 名字翻滚
                nameDisplay.classList.add('rolling-up');
                nameInterval = setInterval(changeName, currentSpeed);
                
                // 问题翻滚
                if (currentMode === 'poem') {
                    poemContainer.classList.add('rolling-down');
                } else {
                    wordContainer.classList.add('rolling-down');
                }
                questionInterval = setInterval(changeQuestion, currentSpeed);
            });
            
            // 停止按钮
            stopBtn.addEventListener('click', function() {
                startBtn.disabled = false;
                stopBtn.disabled = true;
                
                clearInterval(nameInterval);
                clearInterval(questionInterval);
                nameDisplay.classList.remove('rolling-up');
                poemContainer.classList.remove('rolling-down');
                wordContainer.classList.remove('rolling-down');
                
                // 记录结果
                let questionText = '';
                if (currentMode === 'poem') {
                    questionText = `${poemTitle.textContent} - ${poemAuthor.textContent}`;
                } else {
                    questionText = `拼音: ${pinyinDisplay.textContent}`;
                }
                const result = `学生: ${nameDisplay.textContent} - 题目: ${questionText}`;
                history.unshift(result);
                updateHistory();
            });
            
            // 答对按钮
            correctBtn.addEventListener('click', function() {
                score++;
                scoreDisplay.textContent = score;
                correctSound.play();
                
                // 添加小花效果
                const flower = document.createElement('div');
                flower.textContent = '🌸';
                flower.style.position = 'absolute';
                flower.style.left = Math.random() * 80 + 10 + '%';
                flower.style.top = Math.random() * 80 + 10 + '%';
                flower.style.fontSize = Math.random() * 20 + 20 + 'px';
                flower.style.animation = 'fadeOut 2s forwards';
                document.body.appendChild(flower);
                
                setTimeout(() => {
                    flower.remove();
                }, 2000);
            });
            
            // 答错按钮
            wrongBtn.addEventListener('click', function() {
                score--;
                scoreDisplay.textContent = score;
                wrongSound.play();
                
                // 添加鼓励文字
                const encouragement = document.createElement('div');
                encouragement.textContent = '继续努力!';
                encouragement.style.position = 'absolute';
                encouragement.style.left = Math.random() * 80 + 10 + '%';
                encouragement.style.top = Math.random() * 80 + 10 + '%';
                encouragement.style.color = '#ff6666';
                encouragement.style.fontSize = Math.random() * 10 + 20 + 'px';
                encouragement.style.animation = 'fadeOut 2s forwards';
                document.body.appendChild(encouragement);
                
                setTimeout(() => {
                    encouragement.remove();
                }, 2000);
            });
            
            // 下载按钮
            downloadBtn.addEventListener('click', downloadHistory);
        }
        
        // 随机改变名字
        function changeName() {
            const randomIndex = Math.floor(Math.random() * currentStudents.length);
            nameDisplay.textContent = currentStudents[randomIndex];
            nameDisplay.classList.remove('rolling-up');
            void nameDisplay.offsetWidth; // 触发重绘
            nameDisplay.classList.add('rolling-up');
        }
        
        // 随机改变问题
        function changeQuestion() {
            if (currentMode === 'poem') {
                const randomIndex = Math.floor(Math.random() * poems.length);
                poemTitle.textContent = poems[randomIndex].title;
                poemAuthor.textContent = poems[randomIndex].author;
                poemContainer.classList.remove('rolling-down');
                void poemContainer.offsetWidth; // 触发重绘
                poemContainer.classList.add('rolling-down');
            } else {
                const randomIndex = Math.floor(Math.random() * words.length);
                pinyinDisplay.textContent = words[randomIndex].pinyin;
                currentWordAnswer = words[randomIndex].word;
                answerDisplay.style.display = 'none';
                wordContainer.classList.remove('rolling-down');
                void wordContainer.offsetWidth; // 触发重绘
                wordContainer.classList.add('rolling-down');
            }
        }
        
        // 更新历史记录
        function updateHistory() {
            historyList.innerHTML = '';
            history.forEach(item => {
                const div = document.createElement('div');
                div.className = 'history-item';
                div.textContent = item;
                historyList.appendChild(div);
            });
        }
        
        // 下载历史记录和分数
        function downloadHistory() {
            let content = '七年级古诗与生字词有奖抽背记录\n\n';
            content += `当前班级: ${currentClass === 'class11' ? '七(11)班' : '七(12)班'}\n`;
            content += `当前模式: ${currentMode === 'poem' ? '古诗抽背' : '生字词抽背'}\n`;
            content += `当前得分: ${score}\n\n`;
            content += '抽答历史:\n';
            history.forEach(item => {
                content += item + '\n';
            });
            
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `七年级抽答记录_${new Date().toLocaleDateString()}.txt`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
        
        // 添加CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeOut {
                from { opacity: 1; transform: translateY(0); }
                to { opacity: 0; transform: translateY(-50px); }
            }
        `;
        document.head.appendChild(style);
        
        // 初始化应用
        init();
    </script>
</body>
</html>